<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>window对象</h1>
    <ul>
        <li>window是浏览器的顶层对象。</li>
        <li>使用var定义的变量，就是定义在window对象上的（let不是）。</li>
    </ul>
    <h2>window对象的方法</h2>
    <ul>
        <li>
            <h3>弹窗相关</h3>
            <ul>
                <li onclick="alert('弹出框')">alert(str)：弹出消息框。</li>
                <li onclick="confirm('确认对话框')">confirm(str)：弹出确认框。返回boolean。</li>
                <li onclick="prompt('请输入文字')">prompt(str)：弹出一个交互框，要求用户输入一段文字，返回用户输入的字符串。</li>
            </ul>
        </li>
        <li>
            <h3>操作窗口相关</h3>
            <ul>
                <li onclick="handleClose()">close()：关闭当前窗口</li>
                <li onclick="handleOpen()">open()：打开窗口</li>
                <li onclick="handleBlur()">blur()：让窗口失去焦点（让窗口去到后面，仅对打开的小窗口有用）。</li>
                <li onclick="handleFocus()">focus()：让窗口获取焦点（让窗口来到顶层，仅对打开的小窗口有用）。</li>
            </ul>
        </li>
        <li>
            <h3>移动窗口相关</h3>
            <p>仅对小窗口有用</p>
            <ul>
                <li>
                    <p>moveBy(x,y)：根据目前位置，相对移动。</p>
                    <button onclick="handleMoveBy(0,-20)">上</button>
                    <button onclick="handleMoveBy(0,20)">下</button>
                    <button onclick="handleMoveBy(-20,0)">左</button>
                    <button onclick="handleMoveBy(20,0)">右</button>
                </li>
                <li onclick="hanldeMoveTo()">moveTo(x,y)：根据屏幕位置，绝对移动。</li>
                <li>resizeBy(scaleX,scaleY)：根据当前大小，相对放大/缩小。</li>
                <li>resizeTo(width,height)：设置窗口固定大小。</li>
            </ul>
        </li>
    </ul>
    <script>
        var a = 100;
        console.log("a = ",a);
        console.log("window.a = ",window.a);

        let b = 200;
        console.log("b = ",b);
        console.log("window.b = ",window.b);

        let openWin;

        // 关闭窗口
        function handleClose() {
            close();
        }

        function handleOpen() {
            // open("http://www.baidu.com");
            // open方法可以传入三个参数，传了参数之后，可以打开一个小窗口
            // param1: URL地址
            // param2：窗口名字
            // param3：属性字符串
            // 返回：打开窗口的window对象引用
            if (null == openWin) {
                openWin = open("../../01html5&css3/01html/Dango_hd.png","团子头","width=500,height=300,scrollbars=no")
            // 再次点击：关闭
            } else {
                openWin.close();
                openWin = null;
            } 
        }

        function handleBlur() {
            if (null != openWin) {
                openWin.blur();
            }
        }

        function handleFocus() {

            if (null != openWin) {
                openWin.focus();
            }
        }

        function handleMoveBy(x,y) {
            if (null != openWin) {
                openWin.moveBy(x,y);
            }
        }

        function hanldeMoveTo() {
            if (null != openWin) {
                openWin.moveTo(100,100);
            }
        }
    </script>
</body>
</html>